import 'package:flutter/material.dart';
import 'package:gameplay_flutter/lib_runtime/global_config.dart';
import 'package:gameplay_flutter/lib_runtime/logger.dart';
import '../../../lib_baseview/utils/constant/app_colors.dart';
import 'throttle_tap_widget.dart';

/// Widget包装器扩展

extension WidgetWrapper on Widget {
  // 包装尺寸
  Widget sized({
    double? width,
    double? height,
  }) =>
      SizedBox(width: width, height: height, child: this);

  Widget round() => ClipOval(
        child: this,
      );

  Widget paddAll(double padding) =>
      Padding(padding: EdgeInsets.all(padding), child: this);

  Widget corner({
    required double radius,
  }) =>
      ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(radius)),
        child: this,
      );

  Widget corner2({
    required double radius,
  }) =>
      ClipRRect(
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(radius),
            topRight: Radius.circular(radius)),
        child: this,
      );

  // 包装边框
  Widget border({
    EdgeInsetsGeometry? padding,
    Color borderColor = Colors.black,
    required double borderWidth,
    BoxConstraints? constraints,
    Color? bgColor,
    AlignmentGeometry alignment = AlignmentDirectional.center,
    double borderRadius = 0,
  }) =>
      Container(
        alignment: alignment,
        padding: padding,
        constraints: constraints,
        decoration: BoxDecoration(
          color: bgColor, // Added background color
          border: Border.all(color: borderColor, width: borderWidth),
          borderRadius: BorderRadius.circular(borderRadius),
        ),
        child: this,
      );

  /// 自定义border
  Widget border2({
    required BoxBorder border,
    EdgeInsetsGeometry? padding,
    BoxConstraints? constraints,
    Color? bgColor,
    AlignmentGeometry alignment = AlignmentDirectional.center,
  }) =>
      Container(
        alignment: alignment,
        padding: padding,
        constraints: constraints,
        decoration: BoxDecoration(
          color: bgColor, // Added background color
          border: border,
        ),
        child: this,
      );

  Widget borderWithFixedHeight({
    required Color borderColor,
    required double borderWidth,
    required double height,
    required double hPadding,
    BoxConstraints? constraints,
    Color? bgColor,
    AlignmentGeometry alignment = AlignmentDirectional.center,
    double borderRadius = 0,
  }) =>
      Container(
        alignment: alignment,
        constraints: constraints,
        padding: EdgeInsets.symmetric(horizontal: hPadding),
        height: height,
        decoration: BoxDecoration(
          color: bgColor, // Added background color
          border: Border.all(color: borderColor, width: borderWidth),
          borderRadius: BorderRadius.circular(borderRadius),
        ),
        child: this,
      )

          /// 缺少这个
          /// 大部分场景下，水平方向会拉满
          .unconstrained();

  /// 左右不同的padding
  Widget borderWithFixedHeight2({
    required Color borderColor,
    required double borderWidth,
    required double height,
    required double lPadding,
    required double rPadding,
    Color? bgColor,
    AlignmentGeometry alignment = AlignmentDirectional.centerStart,
    double borderRadius = 0,
  }) =>
      Container(
        alignment: alignment,
        padding: EdgeInsets.only(left: lPadding, right: rPadding),
        height: height,
        decoration: BoxDecoration(
          color: bgColor, // Added background color
          border: Border.all(color: borderColor, width: borderWidth),
          borderRadius: BorderRadius.circular(borderRadius),
        ),
        child: this,
      );

  /// 指定border
  Widget borderWithFixedHeight3({
    EdgeInsetsGeometry? padding,
    required BoxBorder border,
    required double height,
    Color? bgColor,
    AlignmentGeometry alignment = AlignmentDirectional.centerStart,
  }) =>
      Container(
        alignment: alignment,
        padding: padding,
        height: height,
        decoration: BoxDecoration(
          color: bgColor, // Added background color
          border: border,
        ),
        child: this,
      );

  Widget borderWithFixedSize({
    EdgeInsetsGeometry? padding,
    required Color borderColor,
    required double borderWidth,
    required Size size,
    BoxConstraints? constraints,
    Color? bgColor,
    AlignmentGeometry alignment = AlignmentDirectional.center,
    double borderRadius = 0,
  }) =>
      Container(
        alignment: alignment,
        padding: padding,
        width: size.width,
        height: size.height,
        constraints: constraints,
        decoration: BoxDecoration(
          color: bgColor, // Added background color
          border: Border.all(color: borderColor, width: borderWidth),
          borderRadius: BorderRadius.circular(borderRadius),
        ),
        child: this,
      );

  /// 颜色背景, 无边框
  Widget colorBg({
    required Color? bgColor,
    EdgeInsetsGeometry? padding,
    BoxConstraints? constraints,
    AlignmentGeometry alignment = AlignmentDirectional.center,
    double borderRadius = 0,
  }) =>
      Container(
        alignment: alignment,
        padding: padding,
        constraints: constraints,
        decoration: BoxDecoration(
          color: bgColor, // Added background color
          borderRadius: BorderRadius.circular(borderRadius),
        ),
        child: this,
      );

  /// 支持自定义圆角
  Widget colorBg2({
    required Color? bgColor,
    EdgeInsetsGeometry? padding,
    BoxConstraints? constraints,
    AlignmentGeometry alignment = AlignmentDirectional.center,
    BorderRadiusGeometry? borderRadius,
  }) =>
      Container(
        alignment: alignment,
        padding: padding,
        constraints: constraints,
        decoration: BoxDecoration(
          color: bgColor, // Added background color
          borderRadius: borderRadius,
        ),
        child: this,
      );

  /// 支持设置空对齐参数
  Widget colorBg3({
    required Color? bgColor,
    EdgeInsetsGeometry? padding,
    BoxConstraints? constraints,
    AlignmentGeometry? alignment,
    double borderRadius = 0,
  }) =>
      Container(
        alignment: alignment,
        padding: padding,
        constraints: constraints,
        decoration: BoxDecoration(
          color: bgColor, // Added background color
          borderRadius: BorderRadius.circular(borderRadius),
        ),
        child: this,
      );

  /// 指定宽高的背景色
  Widget colorBgWithFixedSize({
    required Color? bgColor,
    required Size size,
    double borderRadius = 0,
    EdgeInsetsGeometry? padding,
    Color? borderColor,
    AlignmentGeometry alignment = AlignmentDirectional.center,
  }) =>
      Container(
        alignment: alignment,
        padding: padding,
        width: size.width,
        height: size.height,
        decoration: BoxDecoration(
          color: bgColor, // Added background color
          borderRadius: BorderRadius.circular(borderRadius),
          border: borderColor != null ? Border.all(color: borderColor) : null,
        ),
        child: this,
      );

  /// 指定宽高的背景色
  /// 指定border
  Widget colorBgWithFixedSize2({
    required Color? bgColor,
    required Size size,
    EdgeInsetsGeometry? padding,
    BoxBorder? border,
    AlignmentGeometry alignment = AlignmentDirectional.center,
  }) =>
      Container(
        alignment: alignment,
        padding: padding,
        width: size.width,
        height: size.height,
        decoration: BoxDecoration(
          color: bgColor, // Added background color
          border: border,
        ),
        child: this,
      );

  /// 指定宽高的背景色
  /// 指定圆角
  Widget colorBgWithFixedSize3({
    required Color? bgColor,
    required Size size,
    EdgeInsetsGeometry? padding,
    BorderRadiusGeometry? borderRadius,
    AlignmentGeometry alignment = AlignmentDirectional.center,
  }) =>
      Container(
        alignment: alignment,
        padding: padding,
        width: size.width,
        height: size.height,
        decoration: BoxDecoration(
            color: bgColor, // Added background color
            borderRadius: borderRadius),
        child: this,
      );

  /// 指定高度的背景色
  /// 指定高度和水平方向的填充
  Widget colorBgWithFixedHeight({
    required Color bgColor,
    required double height,
    required double hPadding,
    double? minWidth,
    double borderRadius = 0,
    AlignmentGeometry alignment = AlignmentDirectional.center,
  }) {
    return colorBgWithFixedHeight2(
      bgColor: bgColor,
      height: height,
      hPadding: hPadding,
      minWidth: minWidth,
      borderRadius: BorderRadius.circular(borderRadius),
      alignment: alignment,
    );
  }

  /// 自定义圆角
  Widget colorBgWithFixedHeight2({
    required Color bgColor,
    required double height,
    required double hPadding,
    double? minWidth,
    BorderRadiusGeometry? borderRadius,
    AlignmentGeometry alignment = AlignmentDirectional.center,
  }) {
    if (minWidth != null) {
      return Container(
        alignment: alignment,
        padding: EdgeInsets.symmetric(horizontal: hPadding),
        height: height,
        decoration: BoxDecoration(
          color: bgColor, // Added background color
          borderRadius: borderRadius,
        ),
        child: this,
      )
          .constrained(BoxConstraints(minWidth: minWidth))

          /// 缺少这个
          /// 大部分场景下，水平方向会拉满
          .unconstrained();
    } else {
      return Container(
        alignment: alignment,
        padding: EdgeInsets.symmetric(horizontal: hPadding),
        height: height,
        decoration: BoxDecoration(
          color: bgColor, // Added background color
          borderRadius: borderRadius,
        ),
        child: this,
      )

          /// 缺少这个
          /// 大部分场景下，水平方向会拉满
          .unconstrained();
    }
  }

  /// 圆形的背景色
  Widget roundColorBg({
    required Color bgColor,

    /// 直径
    required double length,
    Color? borderColor,
    double? borderWidth,
    AlignmentGeometry alignment = AlignmentDirectional.center,
    Clip clip = Clip.none,
  }) =>
      Container(
        alignment: alignment,
        width: length,
        height: length,
        decoration: BoxDecoration(
          color: bgColor, // Added background color
          borderRadius: BorderRadius.circular(length / 2),
          border: borderColor != null
              ? Border.all(color: borderColor, width: borderWidth ?? 1)
              : null,
        ),
        clipBehavior: clip,
        child: this,
      );

  /// 渐变色带边框
  Widget gradientColorBgWithBorder({
    required List<Color> colors,
    Color? borderColor,
    required double borderWidth,
    double borderRadius = 0,
    EdgeInsetsGeometry? padding,
    AlignmentGeometry alignment = AlignmentDirectional.center,
  }) =>
      Container(
        alignment: alignment,
        padding: padding,
        decoration: BoxDecoration(
          border: Border.all(
              color: borderColor ?? Colors.white, width: borderWidth),
          borderRadius: BorderRadius.circular(borderRadius),
          gradient: LinearGradient(colors: colors),
        ),
        child: this,
      );

  /// 渐变色带边框
  /// 指定尺寸
  Widget gradientColorBgWithBorderWithFixedSize({
    required List<Color> colors,
    Color borderColor = AppColors.COLOR_F3F3F3,
    required double borderWidth,
    required Size size,
    double borderRadius = 0,
    EdgeInsetsGeometry? padding,
    AlignmentGeometry alignment = AlignmentDirectional.center,
  }) =>
      Container(
        alignment: alignment,
        width: size.width,
        height: size.height,
        padding: padding,
        decoration: BoxDecoration(
          border: Border.all(color: borderColor, width: borderWidth),
          borderRadius: BorderRadius.circular(borderRadius),
          gradient: LinearGradient(colors: colors),
        ),
        child: this,
      );

  /// 传入颜色数组
  Widget gradientColorBg({
    required Gradient gradient,
    double borderRadius = 0,
    EdgeInsetsGeometry? padding,
    AlignmentGeometry alignment = AlignmentDirectional.center,
  }) =>
      Container(
        alignment: alignment,
        padding: padding,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(borderRadius),
          gradient: gradient,
        ),
        child: this,
      );

  /// 指定宽高的渐变色
  Widget gradientColorBgWithFixedSize({
    Gradient? gradient,
    required Size size,
    double borderRadius = 0,
    EdgeInsetsGeometry? padding,
    AlignmentGeometry alignment = AlignmentDirectional.center,
  }) =>
      Container(
        alignment: alignment,
        padding: padding,
        width: size.width,
        height: size.height,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(borderRadius),
          gradient: gradient ??
              const LinearGradient(colors: [
                Colors.red,
                Colors.black,
              ]),
        ),
        child: this,
      );

  /// 传入颜色数组
  Widget gradientColorBgWithFixedSize2({
    required List<Color>? colors,
    required Size size,
    double borderRadius = 0,
    EdgeInsetsGeometry? padding,
    AlignmentGeometry alignment = AlignmentDirectional.center,
  }) =>
      Container(
        alignment: alignment,
        padding: padding,
        width: size.width,
        height: size.height,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(borderRadius),
          gradient: colors != null ? LinearGradient(colors: colors) : null,
        ),
        child: this,
      );

  /// 传入颜色数组
  /// 传入Border
  Widget gradientColorBgWithFixedSize3({
    required List<Color> colors,
    required Size size,
    BorderRadiusGeometry? borderRadius,
    EdgeInsetsGeometry? padding,
    AlignmentGeometry alignment = AlignmentDirectional.center,
  }) =>
      Container(
        alignment: alignment,
        padding: padding,
        width: size.width,
        height: size.height,
        decoration: BoxDecoration(
          borderRadius: borderRadius,
          gradient: LinearGradient(colors: colors),
        ),
        child: this,
      );

  /// 指定高度的渐变色
  Widget gradientColorBgWithFixedHeight({
    Gradient? gradient,
    required double height,
    required double hPadding,
    double borderRadius = 0,
    AlignmentGeometry alignment = AlignmentDirectional.center,
  }) =>
      Container(
        alignment: alignment,
        padding: EdgeInsets.symmetric(horizontal: hPadding),
        height: height,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(borderRadius),
          gradient: gradient ??
              const LinearGradient(colors: [
                Colors.red,
                Colors.black,
              ]),
        ),
        child: this,
      );

  /// 指定高度的渐变色
  /// 自定义圆角
  Widget gradientColorBgWithFixedHeight2({
    List<Color>? colors,
    required double height,
    required double hPadding,
    BorderRadiusGeometry? borderRadius,
    AlignmentGeometry alignment = AlignmentDirectional.center,
  }) =>
      Container(
        alignment: alignment,
        padding: EdgeInsets.symmetric(horizontal: hPadding),
        height: height,
        decoration: BoxDecoration(
          // border: border,
          borderRadius: borderRadius,
          gradient: LinearGradient(
              colors: colors ??
                  [
                    Colors.red,
                    Colors.black,
                  ]),
        ),
        child: this,
      ).unconstrained();

  /// 指定高度的渐变色
  /// 指定尺度限制
  Widget gradientColorBgWithFixedHeight3({
    List<Color>? colors,
    required double height,
    required double hPadding,
    double borderRadius = 0,
    BoxConstraints? constraints,
    AlignmentGeometry alignment = AlignmentDirectional.center,
  }) =>
      Container(
        alignment: alignment,
        padding: EdgeInsets.symmetric(horizontal: hPadding),
        height: height,
        constraints: constraints,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(borderRadius),
          gradient: LinearGradient(
              colors: colors ??
                  [
                    Colors.red,
                    Colors.black,
                  ]),
        ),
        child: this,
      ).unconstrained();

  Widget gradientBorder({
    List<Color>? colors,
    required double borderWidth,
    EdgeInsetsGeometry? padding,
    double borderRadius = 0,
    BoxConstraints? constraints,
    AlignmentGeometry alignment = AlignmentDirectional.center,
  }) =>
      Container(
          // alignment: alignment,
          // padding: padding,
          // constraints: constraints,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
              colors: colors ??
                  [
                    Colors.red,
                    Colors.black,
                  ],
            ),
            // borderRadius: BorderRadius.circular(borderRadius),
            borderRadius: BorderRadius.all(Radius.circular(borderRadius)),
          ),
          child: Padding(padding: EdgeInsets.all(borderWidth), child: this));

  Widget gradientBorderWithFixedSize({
    List<Color>? colors,
    required Size size,
    required double borderWidth,
    EdgeInsetsGeometry? padding,
    double borderRadius = 0,
    BoxConstraints? constraints,
    AlignmentGeometry alignment = AlignmentDirectional.center,
  }) =>
      Container(
          alignment: alignment,
          padding: padding,
          height: size.height,
          width: size.width,
          constraints: constraints,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
              colors: colors ??
                  [
                    Colors.red,
                    Colors.black,
                  ],
            ),
            borderRadius: BorderRadius.circular(borderRadius),
          ),
          child: paddAll(borderWidth));

  /// 圆角渐变背景
  Widget roundGradientColorBg({
    required List<Color> colors,

    /// 直径
    required double length,
    Color? borderColor,
    double? borderWidth,
    AlignmentGeometry alignment = AlignmentDirectional.center,
    Clip clip = Clip.none,
  }) =>
      Container(
        alignment: alignment,
        width: length,
        height: length,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(length / 2),
          border: borderColor != null
              ? Border.all(color: borderColor, width: borderWidth ?? 1)
              : null,
          gradient: LinearGradient(colors: colors),
        ),
        clipBehavior: clip,
        child: this,
      );

  /// 图片背景
  /// 自适应图片大小
  Widget imageBg({
    EdgeInsetsGeometry? padding,
    BoxConstraints? constraints,
    required ImageProvider<Object> image,
    double borderRadius = 0,
    BoxFit fit = BoxFit.contain,
    Alignment alignment = Alignment.center,
  }) =>
      Container(
        alignment: alignment,
        padding: padding,
        constraints: constraints,
        decoration: BoxDecoration(
          image: DecorationImage(image: image, fit: fit),
          borderRadius: BorderRadius.circular(borderRadius),
        ),
        child: this,
      );

  /// 图片背景
  /// 指定大小
  Widget imageBg2({
    double? width,
    double? height,
    EdgeInsetsGeometry? padding,
    BoxConstraints? constraints,
    required ImageProvider<Object> image,
    double borderRadius = 0,
    BoxFit fit = BoxFit.contain,
    Alignment alignment = Alignment.center,
  }) =>
      Container(
        alignment: alignment,
        width: width,
        height: height,
        padding: padding,
        constraints: constraints,
        decoration: BoxDecoration(
          image: DecorationImage(image: image, fit: fit),
          borderRadius: BorderRadius.circular(borderRadius),
        ),
        child: this,
      );

  // 包装位置，需要位于Stack的子节点
  Widget positioned({
    double? start,
    double? top,
    double? end,
    double? bottom,
    double? width,
    double? height,
  }) =>
      PositionedDirectional(
        start: start,
        top: top,
        end: end,
        bottom: bottom,
        width: width,
        height: height,
        child: this,
      );

  Widget material() => Material(child: this);

  Widget materialApp() => MaterialApp(home: this);

  Widget align(AlignmentGeometry alignment) =>
      Align(alignment: alignment, child: this);

  Widget scaffold({bool? resizeToAvoidBottomInset, Color? backgroundColor}) =>
      Scaffold(
        body: this,
        resizeToAvoidBottomInset: resizeToAvoidBottomInset,
        backgroundColor: backgroundColor,
      );

  Widget scrollable({
    Axis scrollDirection = Axis.vertical,
  }) =>
      SingleChildScrollView(
        scrollDirection: scrollDirection,
        child: this,
      );

  /// 封装为SliverToBoxAdapter
  /// 以应用在需要Sliver的地方
  Widget get sliver => SliverToBoxAdapter(
        child: this,
      );

  Widget rotate(double angle) => Transform.rotate(
        angle: angle,
        child: this,
      );

  Widget constrained(BoxConstraints constraints) => ConstrainedBox(
        constraints: constraints,
        child: this,
      );

  Widget unconstrained() => UnconstrainedBox(child: this);

  /// 打印自身的布局
  Widget logPrintLayout(String tag) => LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
        RLog.i('$tag: $constraints');
        return this;
      });

  Widget center() => Center(
        child: this,
      );

  /// 0-1
  Widget opacity(double opacity) => Opacity(
        opacity: opacity,
        child: this,
      );

  Widget willPop({bool canPop = true, void Function(bool)? onWillPop}) =>
      PopScope(canPop: canPop, onPopInvoked: onWillPop, child: this);

  // Widget get safeArea => SafeArea(child: this);
  Widget safeArea({
    bool left = true,
    bool top = true,
    bool right = true,
    bool bottom = true,
    EdgeInsets minimum = EdgeInsets.zero,
    bool maintainBottomViewPadding = false,
  }) =>
      SafeArea(
          left: left,
          top: top,
          right: right,
          bottom: bottom,
          minimum: minimum,
          maintainBottomViewPadding: maintainBottomViewPadding,
          child: this);

  Widget onConfirmTap(
    void Function()? action, {
    String? title,
    String? msg,
    bool hightLightCancel = true,
  }) =>
      onTap(() => Text("ddddd"));
  // DialogUtils.confirmBeforeAction(
  //       title: title,
  //       msg: msg,
  //       highlightCancel: hightLightCancel,
  //       action: action)

  Widget visibleState(visible) {
    return Offstage(
      offstage: !visible,
      child: this,
    );
  }

  Widget visible(visible) {
    return Visibility(
      visible: visible,
      child: this,
    );
  }

  Widget expanded({int flex = 1}) {
    return Expanded(flex: flex, child: this);
  }

  /// 响应点击事件
  /// @param onTap 点击事件
  /// @param overlay 是否覆盖一层
  /// !: 覆盖后有时候会影响布局，默认不覆盖
  /// @return 返回一个GestureDetector
  Widget onTap(Function() onTap, {bool overlay = false}) =>
      // GestureDetector(
      //   onTap: onTap,
      //   // 覆盖一层，防止点击穿透
      //   child: overlay ? colorBg(bgColor: Colors.transparent) : this,
      // );
      ThrottleTapWidget(
        onTap: onTap,
        child: overlay ? colorBg(bgColor: Colors.transparent) : this,
      );

  Widget onInkWellTap(Function() onTap) =>
      // 使用InkWell代替GestureDetector
      // 以克服在ReorderableListView上无效的问题
      InkWell(onTap: onTap, child: this);

  Widget onPress(
    Function(PointerDownEvent) onPress,
  ) {
    return Listener(
      onPointerDown: onPress,
      child: this,
    );
  }

  Widget padding({
    double start = 0,
    double top = 0,
    double end = 0,
    double bottom = 0,
  }) {
    return Padding(
      padding: EdgeInsetsDirectional.only(
          start: start, top: top, end: end, bottom: bottom),
      child: this,
    );
  }

  Widget onScroll(
      {Function(double value)? onScrollY, Function(double value)? onScrollX}) {
    return NotificationListener<ScrollNotification>(
      onNotification: (notify) {
        double pixels = notify.metrics.pixels;
        if (notify.metrics.axisDirection != AxisDirection.down &&
            notify.metrics.axisDirection != AxisDirection.up) {
          //横向滚动
          onScrollX?.call(pixels);
        } else {
          //竖向滚动
          onScrollY?.call(pixels);
        }
        return true;
      },
      child: this,
    );
  }

  Widget removeListPadding(BuildContext context) {
    return MediaQuery.removePadding(
      context: context,
      removeTop: true,
      removeBottom: true,
      child: this,
    );
  }

  Widget onDebugTap(Function() onT) {
    // if (GlobalConfiguration().getValue('debug') ?? kDebugMode) {
    if (GlobalConfig.isDebug) {
      return onTap(onT);
    }
    return this;
  }

  /// 在当前Widget上覆盖一层
  Widget overlay(Widget w,
          {AlignmentGeometry alignment = AlignmentDirectional.topStart}) =>
      Stack(
        alignment: alignment,
        children: [this, w],
      );

  /// 添加key
  Widget keyed(String key) => Container(
        key: ValueKey(key),
        child: this,
      );

  /// 剪切
  /// 避免超出本来到区域
  Widget get clipRect => ClipRect(
        child: this,
      );

  /// 忽略点击事件
  Widget get ignore => IgnorePointer(
        child: this,
      );

  Widget paddingOnly({
    double start = 0.0,
    double top = 0.0,
    double end = 0.0,
    double bottom = 0.0,
  }) =>
      Padding(
          padding: EdgeInsetsDirectional.only(
              top: top, start: start, end: end, bottom: bottom),
          child: this);
}
